import { useState, useEffect } from 'react'
import PanelLeft from '../../../../../common/PanelLeft';
import { App, Collapse, message } from 'antd';
import RiskSelector from './RiskSelector';
import './index.less';
import RiskReportContext from './RiskReportContext';
import TimeAnalysis from './TimeAnalysis';
import EffectAnalysis from './EffectAnalysis';
import Zhjc from './Zhjc';
import ReportGenerator from './ReportGenerator';
import BlockPanel from '../common/BlockPanel';

export default function RiskReport(props) {
    const [selectedItem, setSelectedItem] = useState();
    const [activeKey, setActiveKey] = useState('1');
    const [yxfxData, setYxfxData] = useState();
    const [zhjcData, setZhjcData] = useState();
    // const { message } = App.useApp();
    return <RiskReportContext.Provider value={{
        zhData: selectedItem,
        yxfxData,
        zhjcData
    }}>
        <PanelLeft className='risk-report' style={{
            // top: 98
        }}>
            <BlockPanel title="风险评估" className="h100">
                <Collapse accordion activeKey={activeKey} onChange={key => {
                    if (!selectedItem && key?.[0] && key?.[0] !== '1') {
                        message.warning('请先选择灾害');
                        return
                    }
                    setActiveKey(key?.[0]);
                }}>
                    <Collapse.Panel className='risk-selector' header={selectedItem ? `已选择：${selectedItem?.yhmc}` : "选择灾害"} key='1' style={{
                        paddingBottom: 0
                    }}>
                        <RiskSelector onSelected={item => {
                            setSelectedItem(item);
                        }} />
                    </Collapse.Panel>
                    <Collapse.Panel header="时度风险" key='2'>
                        {activeKey === '2' && <TimeAnalysis visible={activeKey === '2'} />}
                    </Collapse.Panel>
                    <Collapse.Panel header="影响分析" key='3'>
                        <EffectAnalysis onCompleted={data => {
                            setYxfxData(data);
                        }} />
                    </Collapse.Panel>
                    <Collapse.Panel header="指挥决策" key='4'>
                        <Zhjc onCompleted={data => {
                            setZhjcData(data)
                        }} />
                    </Collapse.Panel>
                    <Collapse.Panel header="报告生成" key='5'>
                        <ReportGenerator />
                    </Collapse.Panel>
                </Collapse>
            </BlockPanel>
        </PanelLeft>
    </RiskReportContext.Provider>;
}